<template>
  <!--安全检查页面容器-->
  <div class="safety-inspect-container">
    <!--安全检查页面头部容器-->
    <div class="safety-inspect-head-pot">
      <span>安全检查任务流程概览</span>
    </div>
    <!--安全检查页面流程体容器-->
    <ul class="safety-inspect-body-pot">
      <!--安全检查页面流程-->
      <li class="safety-inspect-process-box" v-for="item in inspectSteps">
        <!--左侧数字容器-->
        <div class="left-number">
          <span>{{ item.stepCode }}</span>
        </div>
        <!--右侧文本容器-->
        <div class="right-text">
          <span class="step-name">{{ item.stepName }}</span>
          <span class="step-context" @click="txtClick(item.emitFlag)" v-html="item.stepContent"></span>
        </div>
      </li>
    </ul>

  </div>

</template>

<script>
export default {
  name: "process",
  data() {
    return {
      inspectSteps: [
        {stepCode: '01', stepName: '下发任务', stepContent: '自治区领导创建安全检查任务并下发任务', emitFlag: false},
        {stepCode: '02', stepName: '接收任务', stepContent: '下级组织确认安全检查任务后并接收任务', emitFlag: false},
        {stepCode: '03', stepName: '落实任务', stepContent: '接收安全检查任务后相关负责人落实任务', emitFlag: false},
        {
          stepCode: '04',
          stepName: '复核结果/完成任务',
          stepContent: '落实任务后并反复复核结果高质量完成任务',
          emitFlag: false
        },
        {
          stepCode: '05',
          stepName: '逐级上报并归档',
          stepContent: `<span>接下来您可以<span class="button-span">创建安全检查任务</span></span>`,
          emitFlag: true
        }
      ],
    }
  },
  methods: {
    txtClick(emitFlag) {
      if (emitFlag) {
        this.$emit('txtClick')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
//设置组件外容器样式
.safety-inspect-container {
  width: 100%;
  margin-bottom: 20px;
  //设置流程头部容器样式
  .safety-inspect-head-pot {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;

    //background: pink;   //仅用于布局查看
    font-size: 14px;
    //设置文字居中
    display: flex;
    align-items: center;
    color: rgba(48, 49, 51, 1);
  }

  //设置任务体容器样式
  .safety-inspect-body-pot {
    margin-top: 0;
    width: 100%;
    height: 80px;
    box-sizing: border-box;
    padding: 0 20px 0 20px; //设置前后各缩进20px
    list-style: none;
    //设置内中元素位置
    display: flex;
    justify-content: space-between;
    //设置任务容器样式
    .safety-inspect-process-box {
      //设置宽高
      width: 19.5%;
      height: 100%;
      //设置任务元素边框
      border: 1px solid rgba(220, 223, 230, 1);
      //设置任务元素位置
      display: flex;
      justify-content: flex-start;
      //设置左侧数字容器样式
      .left-number {
        //设置宽高
        width: 50px;
        height: 60%;
        //设置任务编号位置
        display: flex;
        justify-content: center;
        align-items: center;
        //设置任务编号文本样式
        color: rgba(32, 125, 255, 1);
        font-weight: bold;
        font-size: 26px;
      }

      //设置右侧文本容器样式
      .right-text {
        //设置宽高
        height: 60%;
        //设置容器元素位置
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding-top: 10px; //设置上边与文本间距
        //设置任务名样式
        .step-name {
          font-size: 15px;
          font-weight: 500;
          margin-bottom: 5px; //设置与下方任务内容之间的间距
          letter-spacing: 1px;
        }

        //设置任务内容样式
        .step-context {
          font-size: 14px;
          color: rgba(144, 147, 153, 1);

          ::v-deep .button-span { //设置绑定了点击事件的文本的样式
            color: #1482f0;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
